$loadSize = 16px
$loadSize-small = 30px
// $loadTitleSize = 16px
$loadColor = #333
$width = 1em


.ss-load
  ss-display-flex(column, center, center)
  &:before
    content: ''
    // background: url('/images/ui/loading.png') center center no-repeat
    // background-image: url('images/ui/loading.png')
    // background-size: cover
    display: block
    animation: 1s loader-01 linear infinite
  &.item-absolute
    position: absolute
    top: 0
    left 0
    width: 100%
    height: 100%
    background: fade-out(#fff, .3)
    z-index 3
.load-01
  &:before
    content: ""
    display: block
    width: $width
    height: @width
    color: $loadColor

    border: 0.2em solid transparent
    border-left-color: currentcolor
    border-right-color: currentcolor
    border-radius: 50%
    background: none
    font-size: $loadSize
    animation: 1s loader-01 linear infinite
  .htitle
    margin-top: 6px


@keyframes loader-01 
  0% 
    transform: rotate(0deg)

  100% 
    transform: rotate(360deg)

// $loadSize = 50px
// $loadSize-small = 30px
// $loadMarginb = 15px
// $loadMarginl = 10px
// // $loadTitleSize = 16px
// // $loadColor = #333

// // .loading-wrap
// //   ss-display-flex(column, flex-start, center)
// //   &.absolute
// //     position: absolute
// //     top: 0
// //     left 0
// //     width: 100%
// //     height: 100%
// //     z-index $zidx-l
// //     background: #fff
// //     justify-content: center
// //   &.lr
// //     flex-flow: row nowrap
// //     .loading-txt
// //       margin-left: $loadMarginl
// //   &.tb
// //     .loading-body
// //       margin-bottom: $loadMarginb
// //   &.loading-full
// //     background: $mask-bg
// //     position: fixed
// //     width: 100%
// //     height: 100%
// //     top: 0
// //     left: 0
// //     z-index: $zidx-h
// //     ss-display-flex(row nowrap, center, center, center)
  
// //   .loading-txt
// //     {config-title}
// //   .loading-body
// //     position: relative
// //     width: $loadSize
// //     height: @width
// //     &.small
// //       width: $loadSize-small
// //       height: @width
// //       ~.loading-txt
// //         font-size: 12px
// //   .loading-circle, .loading-logo
// //     width: 100%
// //     height: 100%
// //     position: absolute
// //     margin: 0 auto
// //     right: 0
// //     left: 0
// //   .loading-circle
// //     background: url('/images/ui/loading.png') center center no-repeat
// //     background-size: cover
// //     -webkit-animation: loading 1.3s linear infinite
// //   .loading-logo
// //     background: url('/images/ui/loading-logo.png') center center no-repeat
// //     background-size: cover

// // @-webkit-keyframes loading
// //   0% {-webkit-transform: rotate(0deg)}
// //   100% {-webkit-transform: rotate(360deg)}

// :root {
//   /* --loading-attach-color: rgba(211, 211, 211, 0.5) */
//   --loading-attach-color: inherit
//   --loading-attach-width: 1em
//   --loading-attach-height: 1em
//   --loading-attach-margin-right: 0.5em
// }


// .ss-load
//   ss-display-flex(column, center,)
//   &:before
//     content: ""
//     display: block
//     width: var(--loading-attach-width)
//     height: var(--loading-attach-height)
//     margin-right: var(--loading-attach-margin-right)
//     color: var(--loading-attach-color)

//     border: 0.2em solid transparent
//     border-left-color: currentcolor
//     border-right-color: currentcolor
//     border-radius: 50%
//     animation: 1s loader-01 linear infinite
//   .htitle
//     margin-top: 6px


// @keyframes loader-01 {
//   0% {
//     transform: rotate(0deg)
//   }

//   100% {
//     transform: rotate(360deg)
//   }
// }